<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">
    <title>我的资料</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
</head>

<body>
<div class="blog-masthead">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                            data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/index}">首 页</a>
                </div>
                <div id="bs-navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a th:href="@{/interview}" class="blog-nav-item">面试那些事</a></li>
                        <li><a th:href="@{/timeTravel}" class="blog-nav-item">时间旅行</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown hidden-xs" th:if="${user}!=null">
                            <a href="#" class="blog-nav-img" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">
                                <img th:src="${user?.photo ne null}?${user?.photo}:
                                @{/images/icon-user.png}"
                                     alt="头像" class="img-circle picture shadow">
                            </a>
                            <ul class="dropdown-menu">
                                <li><a th:href="@{'/dynamic/'+${user?.id}}">我的动态</a></li>
                                <li class="active"><a href="#">我的资料</a></li>
                                <li><a th:href="@{/issue}">发布文章</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a th:href="@{/logout}">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<section id="mydata" class="mydata">
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <h2 class="text-center">我的资料</h2>
            <br>
            <div class="blog-post">
                <form action="/user/update" method="post" enctype="multipart/form-data" class="form-horizontal">
                    <input type="hidden" name="id" th:value="${user?.id}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-10">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="img-circle imgSrc" th:src="${user?.photo ne null}?
                                            ${user?.photo}:@{/images/icon-user.png}" alt="头像"
                                             style="width: 64px;height: 64px">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <p>支持 jpg、png 等格式大小 3M 以内的图片</p>
                                    <button type="button" class="btn btn-default btn-xs btn-upload">换头像</button>
                                    <input type="file" class="imgFile hidden" name="file">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nickname" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nickname" name="nickname"
                                   th:value="${user?.nickname}" placeholder="输入你的昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="birthday" class="col-sm-2 control-label">出生日期</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="birthday" name="birthday"
                                   th:value="${user?.birthday}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="profession" class="col-sm-2 control-label">职业</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="profession" name="profession"
                                   th:value="${user?.profession}"
                                   placeholder="输入你的职业">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">手机号码</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control" id="phone" name="phone"
                                   th:value="${user?.phone}"
                                   placeholder="输入你的手机号码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email" name="email"
                                   th:value="${user?.email}"
                                   placeholder="输入你的邮箱地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="address" name="address"
                                   th:value="${user?.address}" placeholder="输入你的地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="intro" class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="intro" name="intro"
                                   th:value="${user?.intro}"
                                   placeholder="输入你的简介">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">修改资料</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<div id="msgAlert" th:if="${msg ne '' and msg ne null}" class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
    <strong th:text="${msg}"></strong>
</div>

<footer class="blog-footer">
    <p>青柠的博客</p>
    <p>
        <a href="#">返回顶部</a>
    </p>
</footer>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/all.js}"></script>
<script th:inline="javascript">
    $(function () {
        previewImage();
    });
</script>
</body>
</html>